<template>
    <n-config-provider w-full h-full :locale="zhCN" :date-locale="dateZhCN" :theme="appStore.isDark ? darkTheme : undefined"
        :theme-overrides="naiveThemeOverrides">
        <n-loading-bar-provider>
            <n-dialog-provider>
                <n-notification-provider>
                    <n-message-provider>
                        <slot></slot>
                        <NaiveProviderContent />
                        <n-modal v-model:show="mask.visible" :mask-closable="false">
                            <div></div>
                        </n-modal>
                    </n-message-provider>
                </n-notification-provider>
            </n-dialog-provider>
        </n-loading-bar-provider>
    </n-config-provider>
</template>
  
<script setup>
import { defineComponent, h } from "vue";
import {
    zhCN,
    dateZhCN,
    darkTheme,
    useLoadingBar,
    useDialog,
    useMessage,
    useNotification,
} from "naive-ui";
import { useCssVar } from "@vueuse/core";
import { kebabCase } from "lodash-es";
import { setupMessage, setupDialog } from "@/utils/naive";
import { naiveThemeOverrides } from "@/settings";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();
const mask = reactive({ visible: false });

window.$mask = mask;

function setupCssVar() {
    const common = naiveThemeOverrides.common;
    for (const key in common) {
        useCssVar(`--${kebabCase(key)}`, document.documentElement).value =
            common[key] || "";
        if (key === "primaryColor")
            window.localStorage.setItem("__THEME_COLOR__", common[key] || "");
    }
}

// 挂载naive组件的方法至window, 以便在全局使用
function setupNaiveTools() {
    window.$loadingBar = useLoadingBar();
    window.$notification = useNotification();

    window.$message = setupMessage(useMessage());
    window.$dialog = setupDialog(useDialog());
}

const NaiveProviderContent = defineComponent({
    setup() {
        setupCssVar();
        setupNaiveTools();
    },
    render() {
        return h("div");
    },
});
</script>